<template>
    <view class="bg-[#FCFCFE]">
        <!-- header -->
        <v-header />
        <!-- content -->
        <view class="max-w-[1297px] mx-auto">
            <view class="max-md:px-[5px]">
                <view class="h-[60px] flex items-center mt-[15px] max-md:px-[5px]">
                    <view class="font-bold text-3xl min-w-[40px]">{{ $t("transaction.title") }}</view>
                </view>
                <view class="max-md:hidden">
                    <up-divider :hairline="true" />
                </view>
                <view class="text-sm text-[#6C757d] max-md:hidden">
                    <text class="font-bold">Sponsored: Crudo Protocol</text>
                    <text>: Presale Stage 2 Live at $0.009, Listing soon at $0.20.</text>
                    <text class="text-[rgb(64,138,222)] font-bold cursor-pointer"> Join Presale Now!</text>
                </view>
                <view class="flex items-end mt-[40px] max-md:mt-[20px]">
                    <view class="flex items-center gap-[10px]">
                        <view class="block-button-blue">{{ $t("transaction.btn1") }}</view>
                    </view>
                </view>
                <view class="mt-[15px] min-h-[650px] max-md:px-[5px]">
                    <uni-group v-if="data.length > 0" mode="card">
                        <view class="flex flex-col gap-[25px]">
                            <view
                                v-for="v in data"
                                class="grid grid-cols-6 gap-[130px] items-center max-md:gap-[120px]"
                            >
                                <view class="text-[#6C757d] flex items-center gap-[5px]">
                                    <view>
                                        <up-icon name="question-circle" />
                                    </view>
                                    <view class="min-w-[110px] max-md:min-w-[100px]">
                                        {{ v.title }}
                                    </view>
                                </view>
                                <view class="col-span-5 break-words">{{ v.value }}</view>
                            </view>
                        </view>
                    </uni-group>
                    <view v-else>
                        <z-paging-empty-view />
                    </view>
                </view>
            </view>
        </view>
        <!-- footer -->
        <v-footer />
    </view>
</template>
<script setup>
import { ref } from "vue"
import { getTransactionByTx } from "@/api/common"
import { onLoad } from "@dcloudio/uni-app"
import { useI18n } from "vue-i18n"
import { timeFormat } from "@/utils/tools"

const { t } = useI18n()

let tx = ""
const data = ref({})

const getTransactionByTxFunc = async () => {
    try {
        const res = await getTransactionByTx({ tx })
        data.value = [
            { title: t("transaction.detail1"), value: res.txinfo.hash },
            { title: t("transaction.detail2"), value: res.blockhash },
            { title: t("transaction.detail3"), value: res.blockheight },
            { title: t("transaction.detail4"), value: res.timestamp ? timeFormat(res.timestamp) : "" },
            { title: t("transaction.detail5"), value: res.txinfo.vout[0].address },
            { title: t("transaction.detail6"), value: res.txinfo.vin[0].addr },
            { title: t("transaction.detail7"), value: (res.txinfo.reward / 100000000).toFixed(4) + " HNY" },
            { title: t("transaction.detail8"), value: res.txinfo.gas }
        ]
    } catch (error) {
        console.log(error)
    }
}

onLoad((options) => {
    if (options?.tx) {
        tx = options.tx
    }
    getTransactionByTxFunc(options.tx)
})
</script>
